<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >我的店铺</el-breadcrumb-item>
      <el-breadcrumb-item >店铺详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!--店铺卡片-->
    <el-card  shadow="hover">
      <div slot="header" class="clearfix">
        <span class="text">{{ restaurant.restaurantName }}</span>
      </div>
      <el-row>
        <el-col :span="4" >
          <el-image
              style="width: 200px; "
              :src="restaurant.restaurantImg"
              :preview-src-list="[restaurant.restaurantImg]" class="avatar">
          </el-image>
        </el-col>
        <el-col :span="20">
          <el-descriptions   :column="1" size="medium" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                介绍:
              </template>
              {{ restaurant.description }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                地址:
              </template>
              {{ restaurant.address }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-money"></i>
                餐盒费用:
              </template>
              {{ restaurant.boxCost }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                餐厅持有人:
              </template>
              {{ restaurant.ownerName }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                联系电话:
              </template>
              {{ restaurant.mobile }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-message"></i>
                联系邮箱:
              </template>
              {{ restaurant.email }}
            </el-descriptions-item>
          </el-descriptions>

        </el-col>
      </el-row>
    </el-card>
    <el-button style="position: absolute;margin-top: 20px; right: 10%" type="warning" @click="onClickUpdate">修改信息</el-button>


    <el-dialog
        title="修改店铺信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form label-position="left"
               label-width="100px" class="demo-ruleForm"
               :rules="rules"
               :model="updateRest"
               ref="updateRestRef"
      >
        <el-form-item prop="restaurantName" label="店名">
          <el-input v-model="updateRest.restaurantName" value=""></el-input>
        </el-form-item>
        <el-form-item prop="description" label="描述">
          <el-input v-model="updateRest.description" value=""></el-input>
        </el-form-item>
        <el-form-item prop="restaurantImg" label="图片">
          <el-row>
            <el-col :span="6">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="updateRest.restaurantImg"
                  :preview-src-list="[updateRest.restaurantImg]" class="avatar">
              </el-image>
            </el-col>
            <el-col :span="12"
                    style="text-align: left; position: absolute;left: 60%;top: 50%;transform: translate(-50%, -50%);">
              <el-upload

                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload">
                <el-button size="small" type="primary">点击上传</el-button>

              </el-upload>
            </el-col>
          </el-row>


        </el-form-item>
        <el-form-item  prop="address" label="地址">
          <el-input v-model="updateRest.address" value=""></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="联系电话">
          <el-input v-model="updateRest.mobile" value=""></el-input>
        </el-form-item>
        <el-form-item prop="email" label="联系邮箱">
          <el-input v-model="updateRest.email" value=""></el-input>
        </el-form-item>
        <el-form-item label="餐盒包装费用">
          <el-input v-model="updateRest.boxCost" value=""></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="cancle">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import RestaurantCard from "../../components/restaurant/RestaurantCard";
export default {
  name: "MyRestaurant",
  components: {RestaurantCard},
  inject: ['reload'],
  data() {
    // 电话号码验证
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error('餐厅电话不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('餐厅电话格式不正确'))
          }
        }
      }, 100);
    };
    return {
      restaurant: {
        restaurantImg: '',
      },
      updateRest: {
        id: null,
        restaurantName: '',
        description: '',
        restaurantImg: '',
        address: '',
        mobile: '',
        email: '',
        boxCost: null
      },
      dialogVisible: false,
      rules:{
        restaurantName: [{ required: true, message: '请填写店名', trigger: 'blur' },],
        description: [{ required: true, message: '请填写描述', trigger: 'blur' },],
        restaurantImg: [{ required: true, message: '店铺照片不能为空', trigger: 'blur' },],
        address: [{ required: true, message: '请填写地址', trigger: 'blur' },],
        mobile: [
          {required: true, trigger: 'blur', validator: checkPhone}],
        email: [
          { required: true, message: '请填写邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],

      }
    }
  },
  created() {
    this.$axios({
      method: "get",
      url: "/rest/myrest",
      params: {
        uid: this.$store.getters.uid
      }
    }).then(response => {if (response.data.success) {
            this.restaurant = response.data.my_rest;
          }})
        .catch(error => console.log(error));
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    onClickUpdate() {
      this.dialogVisible = true;
      this.updateRest.id = this.restaurant.id;
      this.updateRest.restaurantName = this.restaurant.restaurantName;
      this.updateRest.description = this.restaurant.description;
      this.updateRest.restaurantImg = this.restaurant.restaurantImg;
      this.updateRest.address = this.restaurant.address;
      this.updateRest.mobile = this.restaurant.mobile;
      this.updateRest.email = this.restaurant.email;
      this.updateRest.boxCost = this.restaurant.boxCost;
    },
    //提交订单信息给后台
    submitForm() {
      this.$refs.updateRestRef.validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: "/rest/update",
            data: {
              id: this.updateRest.id,
              restaurantName: this.updateRest.restaurantName,
              description: this.updateRest.description,
              restaurantImg: this.updateRest.restaurantImg,
              address: this.updateRest.address,
              mobile: this.updateRest.mobile,
              email: this.updateRest.email,
              boxCost: this.updateRest.boxCost
            }
          })
              .then(response => {
                console.log(response.data.message);
                this.reload();
              })
              .catch(error => console.log(error));

        }else {
          return this.$message.error("信息填写不完整！");
        }
      })
    },
    cancle() {
      this.dialogVisible = false;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt50M = file.size / 1024 / 1024 < 50

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!');
      }
      if (!isLt50M) {
        this.$message.error('上传图片大小不能超过 50MB!');
      }

      let formData = new FormData();//文件转换
      formData.append("file", file);
      console.log(file)
      this.$axios.post('/main/addImg', formData, {"Content-Type": "multipart/form-data;charset=utf-8"})
          .then((res) => {
            this.updateRest.restaurantImg = "http://localhost:8080/" + res.data;
          }).catch((error) => {
        console.log(error)
      })

      return isJPG && isLt50M;
    }
  }
}
</script>

<style scoped>

</style>
